<template>
  <div class="shopcar-container">
    <div class="car-list">
      <!-- 商品列表区域 -->
      <div class="mui-card" v-for="(item,i) in shopcarData" :key='i'>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch 
            v-model="$store.getters.getGoodsSelected[item.id]" 
            @change="selected(item.id,$store.getters.getGoodsSelected[item.id])"
            ></mt-switch>
            <img :src="item.thumb_path" alt>
            <div class="info">
              <h1>{{item.title}}</h1>
              <p>
                <span class="price">¥{{item.sell_price}}</span>
                <!-- 在v-for的时候调用vuex中getters的方法，获取到数组=> 键为id 值为count
                 再通过中括号给numbox子组件传一个默认value -->
                <numbox :inventory='$store.getters.getGoodsInventory[item.id]' :count='$store.getters.getGoodCount[item.id]' :currentId='item.id'></numbox>
                <!-- $store.getters.getGoodsInventory[item.id] -->
                <!-- 如何从购物车中获取商品的数量 -->
                <!-- 1. 先创建一个空对象，然后循环购物车中所有的商品，把当前循环的商品的id
                作为对象的属性名 count值 作为对象的属性值，eg. {88:4,89:3 } -->

                <!-- 为所有a添加点击事件， -->
                <a href='#' @click.prevent='remove(item.id,i)'>删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 结算区域 -->
      <div class="mui-card jiesuan">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <div>
              <p>总计（不含运费）</p>
              <p>以勾选商品<span>&nbsp;{{ $store.getters.getGoodsCountAndAmout.count }}&nbsp;</span>件，总价：<span>¥&nbsp;{{ $store.getters.getGoodsCountAndAmout.amount }}</span></p>
            </div>
            <mt-button type='danger'>结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import numbox from "../subcomponents/shopcar_numberbox.vue";
export default {
  data() {
    return {
      shopcarData: []
    };
  },

  methods: {
    getShopCar(){
      var ids = [];
      if(localStorage.getItem('car')) {
        JSON.parse(localStorage.getItem('car')).forEach(item=>{
          ids.push(item.id);
        })
      }else {
        return;
      }
      // 或购物车没有商品 继续发请求会保错
      if(ids.length <= 0) {
        return;
      }
      this.$http.get('api/goods/getshopcarlist/'+ids.join(',')).then(res=>{
        if(res.body.status === 0) {
          this.shopcarData = res.body.message;
        }
      })
    },
    remove(id,index){
      // 点击删除，把商品从store中根据 传递的 id删除，同时把当前组件中的 shopcarData中，对应要删除的商品，使用index删除
      this.shopcarData.splice(index,1);
      this.$store.commit('removeShopcar',id)
    },
    selected(id,value) {
      
      console.log(value)
      this.$store.commit('updateGoodsSelected',{id,selected: value})
    }
  },

  created() {
    this.getShopCar();
},
  components: {
    numbox
  }
};
</script>

<style lang='less'>
.car-list {
  .mui-card-content-inner {
    display: flex;
    align-items: center;
    .info {
      padding-left: 10px;
      h1 {
        font-size: 13px;
        margin: 0 0 10px 0;
      }
      p {
        // margin-top: 10px 0 0 0;
        margin-top: 10px ;
        .price {
          color: red;
          font-weight: bold;
        }
      }
    }
  }
  img {
    height: 60px;
    width: 60px;
  }
}
.jiesuan {
  .mui-card-content-inner {
    display: flex;
    justify-content: space-between;
    span {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
.shopcar-container{
  overflow: hidden;
  background-color: rgb(247, 245, 245);
}
</style>
